<!--
 描述: 3D立体柱状图
-->

<template>
  <div class="left border">
    <div id="litiBar1" style="width:100%;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: "bar3d",
  data() {
    return {
      vehicle: [45, 25, 48, 62, 35],
      controlBall: [23, 12, 52, 14, 9],
      barWidth: 30,
      constData1: [],
      showData1: [],
      constData2: [],
      showData2: [],
      colorArr1: ["#345A8B", "#387ABD", "#51C0DB"],
      colorArr2: ["#51C0DB", "#42D9D6", "#45F5F1"],
    };
  },
  mounted() {
    this.setData(this.vehicle, this.constData1, this.showData1);
    this.setData(this.controlBall, this.constData2, this.showData2);
    this.getChart();
  },
  computed: {
    color1() {
      return this.setColor(this.colorArr1);
    },
    color2() {
      return this.setColor(this.colorArr2);
    },
    options() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: false,
        },
        grid: {
          top: "15%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#FFFFFF",
          },
          axisPointer: {
            handle: {
              show: true
            },
            label: {
              show: true
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1B3F66",
            },
          },
          axisTick: {
            show: false,
          },
          data: ["合肥", "安庆", "芜湖", "南京", "杭州"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#FFFFFF",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1B3F66",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#1B3F66",
            },
          },
        },
        series: [
          {
            z: 1,
            type: "bar",
            name: "柱子1",
            barGap: "15%", //不同柱子自检的近距离，为自身宽度的百分比
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
              color: this.setColor(this.colorArr1),
            },
            data: this.vehicle,
          },
          {
            z: 2,
            name: "柱子1",
            type: "pictorialBar",
            data: this.constData1, //此数据对应底部组件
            symbol: "diamond", //底部组件形状，不写默认为椭圆
            symbolOffset: ["-58%", "50%"], //与柱子的偏移角度
            symbolSize: [25, 10], //底面[宽，高]
            itemStyle: {
              normal: {
                color: this.setColor(this.colorArr2), //底面左右颜色（深，浅）
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: "柱子1",
            type: "pictorialBar",
            symbolPosition: "end",
            data: this.showData1, //此数据对应顶部组件
            symbol: "diamond",
            symbolOffset: ["-55%", "-50%"],
            symbolSize: [
              this.barWidth - 4,
              (10 * (this.barWidth - 4)) / this.barWidth,
            ],
            itemStyle: {
              normal: {
                /* borderColor: colorArr1[2],
							borderWidth: 2, */ //加上棱角分明
                color: this.colorArr1[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 1,
            type: "bar",
            name: "柱子2",
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
              color: this.setColor(this.colorArr2),
            },
            data: this.controlBall,
          },
          {
            z: 2,
            name: "柱子2",
            type: "pictorialBar",
            data: this.constData2,
            symbol: "diamond",
            symbolOffset: ["58%", "50%"],
            symbolSize: [25, 10], //=========================
            itemStyle: {
              normal: {
                color: this.color2,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: "柱子2",
            type: "pictorialBar",
            symbolPosition: "end",
            data: this.showData2,
            symbol: "diamond",
            symbolOffset: ["58%", "-50%"],
            symbolSize: [
              this.barWidth - 4,
              (10 * (this.barWidth - 4)) / this.barWidth,
            ],
            itemStyle: {
              normal: {
                /* 	borderColor: colorArr2[2],
							borderWidth: 2, */
                color: this.colorArr2[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };
    },
  },
  methods: {
    setColor(colorArr) {
      let color = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
					x: 0,
					x2: 0,
					y: 0,
					y2: 1, */
        colorStops: [
          {
            offset: 0,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[1],
          },
          {
            offset: 1,
            color: colorArr[1],
          },
        ],
      };
      return color;
    },
    setData(data, constData, showData) {
      data.filter((item) => {
        if (item) {
          constData.push(1);
          showData.push(item);
        } else {
          constData.push(0);
          showData.push({
            value: 1,
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 2,
                color: "rgba(0,0,0,0)",
              },
            },
          });
        }
      });
    },
    getChart() {
      let chart1 = echarts.init(document.querySelector("#litiBar1"));
      chart1.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.left {
  width: 500px;
  height: 550px;
  border: 2px solid rgba(92, 255, 255, 0.1);
  background: rgba(10, 106, 255, 0.1) url(../../assets/img/wg.png) repeat 50%
    50% !important;
  background-blend-mode: screen;
}
</style>
